<template>
  <div>
    <div :class="cla"></div>
    <Button type="info" @click="change('active')">Info</Button>
    <Button type="success" @click="change('inactive')">Success</Button>
    <Button type="warning" @click="change1(true)">Warning</Button>
    <Button type="error" @click="change1(false)">Error</Button>
    <div class="default" :class="toggled" @click="change2" ></div>
    <Button size="large" icon="ios-download-outline" type="primary" shape="circle"
            @click="change2"></Button>
    <i-switch v-model="temp" />
  </div>
</template>

<script>
export default {
  name: "DynamicStyle",
  computed: {
    toggled() {
      return this.temp ? 'active' : 'inactive'
    }
  },
  data() {
    return {
      cla: 'default',
      cut: true,
      temp: true
    }
  },
  methods: {
    change(select) {
      if (select) { this.cla = 'default ' + select }
    },
    change1(isSelect) {
      this.cla = isSelect ? 'default active' : 'default inactive'
    },
    change2() {
      this.temp = !this.temp
    }
  }
};
</script>

<style lang="less">
/* 全局样式 */

.ivu-btn {
  margin: 0 5px;
}

.default {
  margin: 30px;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  background: tomato;
  cursor: pointer;
}
.active {
  background: OrangeRed;
}
.inactive {
  background: Gold;
}
</style>
